<template>
  <div class="fa-sign-spec">
    <ElFormItem class="size-item" label="宽">
      <ElInputNumber
        v-model="size.w"
        v-input-number-fix
        controls-position="right"
        :precision="0"
        :min="range.minW"
        :max="range.maxW"
        :disabled="disabled"
        @change="updateWidth"
      />

      <div class="unit">毫米</div>
    </ElFormItem>

    <ElFormItem class="size-item" label="高">
      <ElInputNumber
        v-model="size.h"
        v-input-number-fix
        controls-position="right"
        :precision="0"
        :min="range.minH"
        :max="range.maxH"
        :disabled="disabled"
        @change="updateHeight"
      />

      <div class="unit">毫米</div>
    </ElFormItem>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, onMounted } from 'vue'
import { Widget } from '@/models'
import { inputNumberFix } from '@/utils'
import { transSpecToMm, transSpecToPx } from './utils'

/** 签章规格  */
export default defineComponent({
  name: 'SignSpec',

  directives: {
    inputNumberFix
  },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    /** 展示尺寸 */
    const size = reactive({
      /** 宽：mm */
      w: computed({
        get: () => transSpecToMm(props.data.w),
        set: mm => {}
      }),

      /** 高：mm */
      h: computed({
        get: () => transSpecToMm(props.data.h),
        set: mm => {}
      })
    })

    /** 范围 */
    const range = computed(() => {
      let r = { ...props.data.sizeRange }

      Object.entries(r).forEach(([key, val]) => {
        r[key as keyof typeof r] = transSpecToMm(val)
      })

      return r
    })

    onMounted(() => props.data.updateOrigin())

    return {
      /** 展示尺寸 */
      size,

      /** 范围 */
      range,

      /** 更新宽度 */
      updateWidth(w: number) {
        const widget = props.data

        widget.setWidth(w ? transSpecToPx(w) : widget.option.width, false)

        widget.restoreOrigin()
      },

      /** 更新高度 */
      updateHeight(h: number) {
        const widget = props.data

        widget.setHeight(h ? transSpecToPx(h) : widget.option.height, false)

        widget.restoreOrigin()
      }
    }
  }
})
</script>

<style lang="scss">
.fa-sign-spec {
  .size-item {
    .el-form-item__label {
      float: left;
      padding-right: 0;
      line-height: 28px;
    }

    .el-form-item__content {
      display: flex;
      align-items: center;
    }

    .el-input-number {
      flex: auto;
      margin: 0 8px;
    }

    .unit {
      flex: none;
      color: $color-text-regular;
    }
  }
}
</style>
